<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页导航案例</title>
    <style>
        /* 1,全局变量消除内外边距和序列号,下划线 */
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        /* 2,创建大盒子 */
        div {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }

        /* 3,将盒子里面的li标签进行左浮动 */
        li {
            float: left;
            width: 80px;
            height: 50px;
        }

        /* 4,做a标签样式 */
        a {
            font-size: 16px;
            width: 80px;
            height: 50px;
            font-size: 16px;
            color: #fff;
            /* 将a标签创建成块元素,不然文字将顶最左边 */
            display: block;
            text-align: center;
            /* line-height设置和li高一致a标签进行垂直居中 */
            line-height: 50px;
        }

        /* 5,创建a标签伪元素 */
        a:hover {
            background-color: green;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><a href="">新闻1</a></li>
            <li><a href="">新闻2</a></li>
            <li><a href="">新闻3</a></li>
            <li><a href="">新闻4</a></li>
            <li><a href="">新闻5</a></li>
            <li><a href="">新闻6</a></li>
            <li><a href="">新闻7</a></li>
            <li><a href="">新闻8</a></li>
        </ul>
    </div>
</body>

</html>